import React from 'react';
import {
    Tab,
    TabBody,
    NavBar,
    NavBarItem,
    Article
} from 'react-weui';
import 'weui'
import './my_trips.css'

class myTrips extends React.Component {
    state={
        tab:0
    };
    componentDidMount(){
        document.title = '我的行程'
    }
    render() {
        return (
            <Tab>
                <NavBar>
                    <NavBarItem active={this.state.tab == 0} onClick={e=>this.setState({tab:0})}>未完成</NavBarItem>
                    <NavBarItem active={this.state.tab == 1} onClick={e=>this.setState({tab:1})}>已完成</NavBarItem>
                    <NavBarItem active={this.state.tab == 2} onClick={e=>this.setState({tab:2})}>已评价</NavBarItem>
                    <NavBarItem active={this.state.tab == 3} onClick={e=>this.setState({tab:3})}>已取消</NavBarItem>
                </NavBar>
                <TabBody>
                    <Article style={{display: this.state.tab == 0 ? null : 'none'}}>
                        <div className="mormal-font">
                        <div className="unfinished-title">
                            <div>城际行程</div><div>订单已提交</div>
                        </div>
                        <div className="unfin-content">
                            <div>起点:<span className="unfin-left">北京市辖区</span><span className="unfin-minleft">北京市辖区</span></div>
                            <div>终点:<span className="unfin-left">保定市</span><span className="unfin-minleft">北京市辖区</span></div>
                            <div>时间:<span className="unfin-left">2017年9月12日</span><span className="unfin-minleft">北京市辖区</span></div>
                            <div>费用:<span className="unfin-left">0.01</span></div>
                        </div>
                        <div className="unfined-wrap-button"><button className="cacel-trip">取消行程</button><button className="unfined-pay">立即支付</button></div>
                        </div>
                    </Article>
                    <Article style={{display: this.state.tab == 1 ? null : 'none'}}>
                        <div className="mormal-font">
                            <div className="unfinished-title">
                                <div>城际行程</div><div>订单已完成</div>
                            </div>
                            <div className="unfin-content">
                                <div>起点:<span className="unfin-left">北京市辖区</span><span className="unfin-minleft">北京市辖区</span></div>
                                <div>终点:<span className="unfin-left">保定市</span><span className="unfin-minleft">北京市辖区</span></div>
                                <div>时间:<span className="unfin-left">2017年9月12日</span><span className="unfin-minleft">北京市辖区</span></div>
                                <div>费用:<span className="unfin-left">0.01</span></div>
                            </div>
                            <div className="unfined-wrap-button"><button className="cacel-trip">重新下单</button><button className="unfined-pay">评价</button></div>
                        </div>
                    </Article>
                    <Article style={{display: this.state.tab == 2 ? null : 'none'}}>
                        <div className="mormal-font">
                            <div className="unfinished-title">
                                <div>城际行程</div><div>订单已完成</div>
                            </div>
                            <div className="unfin-content">
                                <div>起点:<span className="unfin-left">北京市辖区</span><span className="unfin-minleft">北京市辖区</span></div>
                                <div>终点:<span className="unfin-left">保定市</span><span className="unfin-minleft">北京市辖区</span></div>
                                <div>时间:<span className="unfin-left">2017年9月12日</span><span className="unfin-minleft">北京市辖区</span></div>
                                <div>费用:<span className="unfin-left">0.01</span></div>
                            </div>
                            <div className="unfined-wrap-button"><button className="unfined-pay">重新下单</button></div>
                        </div>
                    </Article>
                    <Article style={{display: this.state.tab == 3 ? null : 'none'}}>
                        <div className="mormal-font">
                            <div className="unfinished-title">
                                <div>城际行程</div><div>订单已取消</div>
                            </div>
                            <div className="unfin-content">
                                <div>起点:<span className="unfin-left">北京市辖区</span><span className="unfin-minleft">北京市辖区</span></div>
                                <div>终点:<span className="unfin-left">保定市</span><span className="unfin-minleft">北京市辖区</span></div>
                                <div>时间:<span className="unfin-left">2017年9月12日</span><span className="unfin-minleft">北京市辖区</span></div>
                                <div>费用:<span className="unfin-left">0.01</span></div>
                            </div>
                            <div className="unfined-wrap-button"><button className="cacel-trip">重新下单</button><button className="unfined-pay">查看退款</button></div>
                        </div>
                    </Article>
                </TabBody>
            </Tab>
        );
    }
};
export default myTrips